<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>衣E-注册</title>
    <!--项目meta信息，请编辑提供 start-->
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="applicable-device" content="mobile">
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <!-- <script type="text/javascript">
        ! function() {
            if (/iphone|android|ipod/i.test(navigator.userAgent.toLowerCase()) == false) {
                location.href = '';
            }
        }();
        document.documentElement.style.fontSize = document.documentElement.clientHeight/document.documentElement.clientWidth<1.5 ? (document.documentElement.clientHeight/603*312.5+"%") : (document.documentElement.clientWidth/375*312.5+"%");
    </script> -->
    <!--ignore-->
    <link rel="stylesheet" type="text/css" href="{{ config('app.url') }}/home/css/_common.css" />
    <link rel="stylesheet" type="text/css" href="{{ config('app.url') }}/home/css/index.css" />
</head>

<body>

    <!-- 页面内容 begin -->
    <div class="wrapper">
        <div class="container">
            <div class="logo">衣E</div>
            <div class="inputs">
                <input type="text" placeholder="请输入手机号" maxlength="11" id="phone">
            </div>
            <div class="inputs imgyzm">
                <input type="text" placeholder="请输入图片验证码" id="imgYzm">
                <img src="{{ config('app.url') }}/home/images/logo.png" alt="" class="send_img">
            </div>
            <div class="inputs szYzm">
                <input type="number" placeholder="请输入验证码" id="dxYzm">
                <a href="javascript:;" class="send_yzm">获取验证码</a>
            </div>
            <div class="inputs">
                <input type="text" value="{{ $code }}" placeholder="邀请码" id="code">
            </div>
        </div>
        <div class="submit_btn">注册</div>
    </div>

    
    <div class="pop"></div>

    <!-- 页面内容 end -->

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="{{ config('app.url') }}/home/js/utils.js"></script>
    <script src="{{ config('app.url') }}/home/js/layer.js"></script>
    <script>
        
        if(navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1){
            $(".pop").show(300);
        }
        var flag1=true,flag2=true,key='',captcha='';
        // 手机号失焦事件
        $("#phone").blur(function (e) { 
            e.preventDefault();
            if(!$utils.formCheck.Phone($(this).val())){
                layer.msg('请输入正确的手机号');
            }
        });
        // 切换图片验证事件
        $(".send_img").click(function (e) { 
            e.preventDefault();
            if(flag1){
                flag1=false;
                send_img();
            }
        });

        send_img();//进入页面初始化验证码

        // 发送验证码事件
        $(".send_yzm").click(function (e) { 
            e.preventDefault();
            if(flag2){
                if(!$utils.formCheck.Phone($("#phone").val())){
                    layer.msg('请输入正确的手机号');
                }else if($utils.formCheck.Required($("#imgYzm").val())){
                    layer.msg('请输入图片验证码');
                }else{
                    flag2=false;
                    send_yzm();
                }
            }
        });

        //提交注册事件
        $(".submit_btn").click(function (e) { 
            e.preventDefault();
            if(!$utils.formCheck.Phone($("#phone").val())){
                layer.msg('请输入正确的手机号');
            }else if($utils.formCheck.Required($("#imgYzm").val())){
                layer.msg('请输入图片验证码');
            }else if($utils.formCheck.Required($("#dxYzm").val())){
                layer.msg('请输入短信验证码');
            }else{
                $.ajax({
                    type: "post",
                    url: "/register_make",
                    async : true,
                    data:{
                        phone:$("#phone").val(),
                        key:key,
                        captcha:$("#imgYzm").val(),
                        sms_code:$("#dxYzm").val(),
                        code:$("#code").val(),
                        _token : '{{csrf_token()}}'

                    },
                    success: function (response) {
                        if(response.code==200){
                            layer.msg('注册成功',function(){
                                window.location.href = "/download";
                            });                  
                        }else{
                            layer.msg(response.message);
                        }
                    }
                });
            }
        }); 

        // 图片验证码请求
        function send_img(){
            $.post("/api/get_image_code",{},
                function(response){
                    if(response.code==200){
                        setTimeout(()=>{
                            flag1=true;
                        },1000)
                        
                        key=response.data.key;

                        $(".send_img").attr("src", 'data:image/png;base64,'+response.data.img);
                    }else{
                        layer.msg(response.message);
                    }
            });
        }
        
        // 短信验证码请求
        function send_yzm(){
            $.ajax({
                type: "post",
                url: "/api/sendByRegister",
                async :true,
                data:{
                    phone:$("#phone").val(),
                    key:key,
                    captcha:$("#imgYzm").val()
                },
                success: function (response) {
                    if(response.code==200){
                        layer.msg('验证码已发送，请注意查收！');
                        intervalFun();
                    }else{
                        layer.msg(response.message);
                    }
                }
            });
            
            // layer.msg('验证码已发送，请注意查收！');
            // intervalFun();
        }

        // 倒计时
        function intervalFun() {
            var time=30;
            var t=setInterval(function () {
                if(time>0){
                    time--;
                    $(".send_yzm").html("重新发送("+time+"s)").addClass('no_click');
                }else{
                    clearInterval(t);
                    $(".send_yzm").html("获取验证码").removeClass("no_click");
                    flag2=true;
                }
            },1000)
        }
    </script>
</body>

</html>